<script setup lang="ts">
import { renderIcon } from '@/utils'
import { Logout, User } from '@icon-park/vue-next'

const theme = useThemeStore()

// const { logout } = useAuth()

const options = ref([
  {
    label: '用户资料',
    key: 'profile',
    icon: renderIcon(User),
  },
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(Logout),
  },
])

type DropdownKey = 'user-center' | 'logout'
function handleDropdown(optionKey: string) {
  const key = optionKey as DropdownKey
  if (key === 'logout') {
    window.$dialog?.info({
      title: '提示',
      content: '您确定要退出登录吗？',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: async () => {
        // await logout()
      },
    })
  }
}

defineOptions({ name: 'UserDropdown' })
</script>

<template>
  <n-dropdown :options="options" @select="handleDropdown">
    <hover-container class="flex items-center p-3" :inverted="theme.header.inverted">
      <n-avatar
        round
        size="medium"
        src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
      />
      <span class="ml-2 text-base">张三</span>
    </hover-container>
  </n-dropdown>
</template>

<style lang="scss"></style>
